<template>
	<view>
		<view class="input_lists">
			<view class="input_list">
				<input type="password" data-name="password" v-model="formData.password" placeholder="请输入旧密码" 
				placeholder-style="font-size:20upx;color:#999999;" @input="openCancel($event,'password', 'hidePassword')"/>
				<image @tap="cleanUp('password', 'hidePassword')" src="../../static/clear.png" v-if="hidePassword"></image>
			</view>
			<view class="input_list">
				<input type="text" password="true" data-name="newpassword" v-model="formData.newpassword" placeholder="请输入新密码" 
				placeholder-style="font-size:20upx;color:#999999;" @input="openCancel($event,'newpassword', 'hideNewpassword')"/>
				<image @tap="cleanUp('newpassword', 'hideNewpassword')" src="../../static/clear.png" v-if="hideNewpassword"></image>
			</view>
		</view>
		<view v-if="submiteing" class="login 11" @click="formSubmite()">
			<view>确定</view>
		</view>
		<view v-else class="login">
			<view>确定</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	export default {
		data() {
			return {
				submiteing:true,
				hidePhone: false,
				hideNewpassword: false,
				formData: {
					newpassword: '',
					password: ''
				}
			}
		},
		methods: {
			// 清除
			cleanUp(type, status) {
				this.formData[type] = ''
				this[status] = false
				this.submiteing=true
			},
			openCancel(event, type, status) {
				if(event.target.dataset.name == type){
					if(event.detail.value.length > 0) {
						this[status] = true
					}else{
						this[status] = false
					}
				}
				this.submiteing=true
			},
			// 请求登录
			formSubmite() {
				if (!this.formData.newpassword) {
					this.$toast('请输入新密码')
					return false
				}
				if (!this.formData.password) {
					this.$toast('请输入旧密码')
					return false
				}
				this.submiteing=false
				if(this.submiteing==false){
					uni.request({
						url: request.common.baseUrl+'/api/login/changePassword',
						data: {
							token:uni.getStorageSync('keyToken'),
							newpassword:this.formData.newpassword,
							password:this.formData.password
						},
						header: {
							'Content-Type':'application/json;charset=UTF-8',
							'Content-Type':'application/x-www-form-urlencoded'
						},
						success: (res) => {
							if(res.data.code==200){
								uni.showToast({
									title:res.data.msg,
									duration: 2000,
									icon: 'none',
								})
								setTimeout(function () {
									uni.navigateBack({
										delta:1
									})
								}, 2000);
							}else{
								uni.showToast({
									title:res.data.msg,
									icon: 'none',
								})
								this.submiteing=true
							}
						}
					});
				}
				
			}
		}
	}
</script>

<style>
page{
	background-color: #ffffff;
}
.logo{
	width:750upx;
	text-align:center;
}
.logo image{
	width:200upx;
	height:200upx;
	padding-top:100upx;
}
.logo view{
	font-size:32upx;
	color:#333333;
	margin-top:-10upx;
}
.input_lists{
	width:600upx;
	margin:100upx 75upx 15upx;
}
.input_list{
	width:600upx;
	height:100upx;
	position:relative;
}
.input_list input{
	width:600upx;
	height:100upx;
	font-size:32upx;
	color:#333333;
	float:left;
	border-bottom:1upx solid #f6f6f6;
}
.input_list image{
	width:20upx;
	height:20upx;
	float:right;
	position:absolute;
	margin-top:50upx;
	margin-left:-30upx;
}
.getverifycode{
	float:right;
	position:absolute;
	right:0;
	top:30upx;
	color:#52c41a;
}
.login{
	margin-top:80upx;
	text-align:center;
}
.login view{
	background-color: #52c41a;
	color:#FFFFFF;
	font-size:28upx;
	width:600upx;
	height:80upx;
	line-height:80upx;
	margin:auto;
	border-radius:40upx;
}

</style>
